<template>
  <div class="main-con">
    <el-tabs v-model="activeName" type="card" class="font">
      <el-tab-pane label="实物网络零售" name="first">
        <div class="echarts-cont">
          <!-- 柱状图 -->
          <div class="overlay">
            <div id="main" style="width: 600px; height: 600px"></div>
          </div>
          <!-- 表格 -->
          <div class="form">
            <table id="tab" align="center" width="600px">
              <thead style="background: #1a202c; color: #fff">
                <tr>
                  <th>时间</th>
                  <th>行业</th>
                  <th>网络零售额(万元)</th>
                  <th>同比(%)</th>
                  <th>占比(%)</th>
                </tr>
              </thead>
              <tbody style="background: #1a202c; color: #fff">
                <tr v-for="item in table" :key="item.id">
                  <td>{{ item.time }}</td>
                  <td>{{ item.hang }}</td>
                  <td>{{ item.sale }}</td>
                  <td>{{ item.tb }}</td>
                  <td>{{ item.zz }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实物行业统计" name="second">
        <!-- 筛选 -->
        <!-- 柱状图 -->
        <!-- <div id="bargraph">   -->
        <div
          class="cont"
          id="cont"
          style="width: 100vw; height: 600px; margin: auto"
        >
          <!-- </div> -->
        </div>
        <!-- 表格 -->
        <div class="form">
          <table id="tab" align="center" width="1000px">
            <thead style="background: #1a202c; color: #fff">
              <tr>
                <th>时间</th>
                <th>行业</th>
                <th>网络零售额(万元)</th>
                <th>同比(%)</th>
                <th>占比(%)</th>
              </tr>
            </thead>
            <tbody style="background: #1a202c; color: #fff">
              <tr v-for="item in table" :key="item.id">
                <td>{{ item.time }}</td>
                <td>{{ item.hang }}</td>
                <td>{{ item.sale }}</td>
                <td>{{ item.tb }}</td>
                <td>{{ item.zz }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实物行业洞察" name="third">
        <div>
          <table align="center" width="1000px">
            <thead style="background: #1a202c; color: #fff">
              <tr>
                <th>时间</th>
                <th>行业</th>
                <th>网络零售额(万元)</th>
                <th>同比(%)</th>
                <th>占比(%)</th>
              </tr>
            </thead>
            <tbody style="background: #1a202c; color: #fff">
              <tr v-for="item in table" :key="item.id">
                <td>{{ item.time }}</td>
                <td>{{ item.hang }}</td>
                <td>{{ item.sale }}</td>
                <td>{{ item.tb }}</td>
                <td>{{ item.zz }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style="margin-top: 60px">
          <table align="center" width="1000px;">
            <thead style="background: #1a202c; color: #fff">
              <tr>
                <th>时间</th>
                <th>行业</th>
                <th>网络零售额(万元)</th>
                <th>同比(%)</th>
                <th>占比(%)</th>
              </tr>
            </thead>
            <tbody style="background: #1a202c; color: #fff">
              <tr v-for="item in table" :key="item.id">
                <td>{{ item.time }}</td>
                <td>{{ item.hang }}</td>
                <td>{{ item.sale }}</td>
                <td>{{ item.tb }}</td>
                <td>{{ item.zz }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: "first",
      table: [
        {
          time: "2022-1",
          hang: "娱乐",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
        {
          time: "2022-2",
          hang: "餐饮",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
        {
          time: "2022-3",
          hang: "住宿",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
        {
          time: "2022-4",
          hang: "游玩",
          sale: "445",
          tb: "44%",
          zz: "22%",
        },
      ],
    };
  },
  mounted() {
    this.drawlay();
    this.drawechart();
  },
  methods: {
    drawechart() {
      var chartDom = document.getElementById("cont");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          orient: "vertical",
          x: "center",
          y: "top",
          backgroundColor: "#fac858",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "yy", "dd"],
          axisTick: {
            //x轴刻度线
            show: false,
          },
          axisLabel: {
            interval: 0,
            rotate: 45,
          },
        },
        yAxis: {
          type: "value",
          name: "单位:万元",
          nameLocation: "end",
          nameGap: 35,
        },
        series: [
          {
            name: "网络零售额",
            itemStyle: {
              barBorderRadius: [2, 2, 2, 2], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //右下左上 四个方位。也就是从右边开始顺时针方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                1,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#3F95CE ",
                  },
                  {
                    offset: 1,
                    color: "#1DE7E7 ",
                  },
                ]
              ),
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: "20",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawlay() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        // legend: {
        //   data: ["Evaporation", "Precipitation", "Temperature"],
        // },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Precipitation",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "Temperature",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                1,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#1EE7E7 ",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#1EE7E7 ",
                  },
                ]
              ),
            },
          },

          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
            lineStyle: {
              color: "#ED5731 ",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.font {
  color: #fff;
}

.main-con {
  // background: #181e30;
  height: 100%;
}
.echarts-cont {
  width: 100%;
  margin: 20px 160px;
  display: flex;
}
tr {
  text-align: center;
}
tr:nth-child(even) {
  background: #122843;
}
tr:nth-child(odd) {
  background: #181e30;
}
.form {
  margin-left: 60px;
}
</style>